Copyright: Help file (C) Copyright 1996 Brad Klann


Contents
1.0.2

How to use this help file

Getting Started

Tutorial

Basic Tags

Limitations & Problems with HTML

Using GOMER

Summary of Tool Bar Buttons

Tools / Features reference

Shortcut Keys

About GOMER

Misc.

Acknowledgements

Troubleshooting

Known Bugs List

WHY YOU SHOULD REGISTER

          (C)  Copyright 1996 Stoopid Software

    	        All Rights Reserved


HTML

HTML is short for HyperText Markup Language.

HTML documents can contain formatted text, in-line images, and links to a wide variety of information types.


Limitations and problems with HTML

Extensions

The most frustrating problem you will most likely run into when designing your web pages is the issue of compatibility.  HTML is very dynamic, and is constantly being modified, extended, and upgraded.  Elements which one user may be able to view, may not be visible to another.

Your two main options for dealing with this problem are:

1.  Stick to the official specifications.  Use only the universally excepted tags so your pages will look very similar to all viewers.

2.  Go with the extended options.  At the time of writing this, it was reported that over 87% of WWW users were using the leading browser program.  Using the special tags for this browser will leave around 13% of Web users out, but will usually allow you to make much more interesting pages.

GOMER presents a mix of extended and strict tags.  It is up to you to decide which you want to include in your documents.  There is no 'correct' method... choose the option you feel most comfortable with.

Format

HTML was not originally intended for the elaborate pages it is now being used to create.  Keep in mind that the language is still fairly simple, and there are many things which simply cannot be done yet in terms of formatting HTML documents.

Size

Because every element of a HTML document must be transmitted to the viewer, even a small difference in size can mean a difference in the amount of waiting time required to view the document.

One of the biggest mistakes people make is abusing images.  I was once given a handy tip...  An ENTIRE web page - images and text -  should never exceed a total of 20k in size.  I frequently break this rule, but always keep it in mind when designing.  Amateurs (and even many professionals) tend to forget this rule, and produce pages with huge images; which may take many minutes to transfer.  If your page hasn't loaded in a reasonable amount of time, chances are few people will bother to stick around for it.

Remember - every byte counts in web design.  No one enjoys sitting while waiting for a large page to load.  If you have quite a bit of information It is usually best to break it into better organized 'bite-sized' chunks, and put them on separate pages. Your audience can get to the information they are looking for more quickly.


How to use this help file
About this Help File

Need help with an HTML Tag?

- Highlight the tag in the document you are working on

- Press the help key (F1).

- The appropriate help topic will appear when available.

Help with dialog boxes:

In addition to the F1 key, most dialog boxes have a  [image]  help button in the lower left-hand corner to bring up the appropriate help topic.

Because of the dynamic nature of the HMTL specification and the speed at which it is evolving, this reference makes no distinction between official HTML Markup and extensions.  Test any element you are unsure about with your browser program to see if it is supported.

Note:  Some information has been intentionally simplified to help new users.  This help file is intended for general reference only, for important technical reference, please use a more reliable source.


Tutorial - Basic HTML
GOMER's HTML Tutorial

Getting Started

Learning Tip

1. Creating a Simple HTML Document

2. Adding & Formatting Text

3. Adding Images

Basic

4. HyperText Links

5. Lists

6. Tables

Advanced

7. Framesets


   1. A simple page

- With Gomer running, press the  [image]  button, or select New from the file menu.

- The "New HTML Document" window should appear.   Choose OK to accept  the default values.

- The "Document Color Selection" window should appear. This window allows you to configure the text and background elements of your new document. Choose OK to accept default values.

- What you see is the basic template for an HTML document.

- Type  Hello! between the <BODY> and </BODY> tags.

Your Document should look like:

<HTML>

<HEAD>

<TITLE>New Document</TITLE>

</HEAD>

<BODY>

Hello!

</BODY>

</HTML>

- Press the [image] (Save) button, or choose Save As from the File menu

- That's it!  Start your web browser program and load the file from the Hard Drive.

- Your document should appear as:

Hello!

You should know:

- How to start a new document

- Where to enter text in an HTML document.

- How to save a document

- How to preview a document

Next lesson


      2.  Formatting text

Use the document you created in the above lesson for this session.

- Type the words Welcome to my Page on the line below 'Hello!'. Enter additional text so your document appears as below:

<HTML>

<HEAD>

<TITLE>New Document</TITLE>

</HEAD>

<BODY>

Hello!

Welcome to my Page

So How Do You Like It?

Look out world.

</BODY>

</HTML>

- Preview your document, it should appear as:

Hello! Welcome to my page So How Do You Like It? Look out world.

- Highlight the word Hello! and press SHIFT + F1 to enter the Header <H1> tag.

- Highlight the words  Welcome to my Page. and press the [image] button

- After it, and between Look out and world!, press SHIFT + ENTER (or the [image] button) to enter the <BR> tag.   This tag represents a line break, and will start a new line when viewed.

- Highlight the word  you. and press the bold [image] button

<HTML>

<HEAD>

<TITLE>New Document</TITLE>

</HEAD>

<BODY>

<H1>Hello!</H1>

<P>Welcome to my Page</P>

So how do <B>you</B> like it?<BR>

Look out <BR>world!

</BODY>

</HTML>

- Preview your document, it should appear as:

Hello!

Welcome to my Page

So how do you like it?

Look out

world!

You should know:

- Formatting depends on tags, not how it looks in the editor

- How to create a header

- How to format a paragraph

- How to enter line breaks

- How to format bold text

Next lesson


   3. Adding Images

You will need a .gif or .jpg image in the directory where the document is saved to complete this lesson.

The <IMG> tag configures in-line images

- Place the cursor at the position in your document where you want the image.  Press the camera button [image]  to view the image dialog box.

-  Select an image file and press OK.  Preview your document.

- That is all you need to configure an image.

- It is a good idea to also include a description of the image in the alternate text area.  This provides information to viewers who cannot see the image.

- Experiment with the other attributes available in the dialog box.

You should know:

- How to load the image dialog box

- How to include an image file in an html document

- Purpose of the ALT=  element

- Effects of other available image attributes

TUTORIAL


   4. HyperText Links

HyperText links are one of the features of HTML which have contributed to the enormous popularity of the World Wide Web.   Links allow users to jump from a page to any number of information sources.

- Create a new document, or use one created in a previous lesson.

-  Place the cursor at the position where you want the link.

- Load the link dialog by pressing the  [image]  button.

- It is a good idea to also

Caption

-  The caption box reflects the text a user will click on to reach the referenced URL.

-  If text was selected when the caption dialog was opened, it will automatically appear in the caption box, otherwise you may type it there now.

-  Place the cursor at the position where you want the link.

Internal / External Link

  External

-  The caption box reflects the text a user will click on to reach the referenced URL.

-  You can use the prefix shortcut box to add common URL prefixes.

-  Type the URL into the external link box

  Internal

-  Internal jumping to a specific anchor location within a document.

-  Anchors within the current document are listed in the pull-down menu,

-  Type the URL into the link box

Target =

-  Use the Target attribute in a document using frames to specify where the followed link will be seen.

You should know:

- How to load the link dialog box

- Use of the Caption box of the link form.

- The difference between internal and external links

- Purpose of the TARGET=  element

TUTORIAL


      5. Creating Lists

Gomer provides a handy tool for creating lists.

- If you already have the list typed into the document, highlight the list text.

-  Press the [image] create list button.

-  Select the proper list type.

Unordered (bulleted) List

- Make sure each list item is entered on a separate line.

- Select Bullet Style if desired.

- Press OK.

Ordered (numbered) List

- Enter each item on  a separate line

- Select numbering style if required.

- Select starting number if needed.

- Press OK.

Definition List

- Place DT tag before each new term.

- Place DD tag between each term and definition.

- Press OK.

See Also:

Lists

TUTORIAL


   6. Creating Tables

Tables are a handy way to organize information in a web document.

- Place the cursor at the position in the document where you'd like the table.

-  Press the [image]  table button

- Select the proper number of rows and columns.

- Press OK.

- In the editor window, place cell information between <TD> tags.

Options

New Line for each cell

This option puts each <TD> tag set on a new line for easier editing.

Width

Not surprisingly, this sets the width of the table. (in pixels or percentage of page width)

Border

Sets the width of table borders.

Cell padding

Controls the space left between the cell wall, and cell data

Cell Spacing

Controls the amount of space between cells.

Caption

Allows for the table to have a caption

Editing Cells

After creating a table layout with the table tool, you will need to enter information into the individual cells.

Each set of <TD></TD> or <TH></TH> tags contains the data for one cell of a table.

Just about any information that can be put into a regular HTML document can be put into a table cell,  images, links, and text are all commonly put into HTML tables.

Text

To put the word hello into a cell, you simply need to type it between the table data tags.

<TD>Hello!</TD>  - would put Hello! into one of the cells.

Images and links

To put an image or a link into a cell, place the cursor between the tags, and use the normal tool buttons to create these items.

Table cells also support the COLSPAN, ROWSPAN, ALIGN=,  and VALIGN= attributes.

See Also:

<TABLE>

TUTORIAL


  7. Creating Frames

Framesets can be a fun way to present interesting data in an unusual way.

- With a document open, select  Frames... from the Format menu.

-  Click 1 time anywhere you want on the white frame palette.

- A horizontal black line should appear.

- Click on the line and drag to move it.  Drag off the screen to remove it.

- Place one line on the document, press OK.

- In the Configure Frame #1 box, choose a file for the first frame.

- Press OK, and continue to choose documents for the consecutive windows.

- Type Ooops, No Frames between the <BODY> tags.

- Your finished document should look something like this...

<HTML>

<HEAD>

<TITLE>New Document</TITLE>

</HEAD>

<FRAMESET ROWS="45%,55%">

  <FRAME SRC="TEST.HTM">

  <FRAME SRC="TEST.HTM">

</FRAMESET>

<NOFRAMES>

<BODY>

Ooops.  No Frames.

</BODY>

</NOFRAMES>

</HTML>

- Preview the document.  If you see the frames, your browser supports frames, if you see a blank page with the words Ooops, No Frames, your browser does not support frames.

TUTORIAL


  Learning Tips

Although HTML is easy to learn, getting started with any new language can be difficult.  This tutorial covers the most basic aspects of HTML authoring.  The lessons progress slowly, and you can repeat any if you are unsure of the subject.

Take some time to browse around the web to get a general idea of what can and can't be done.

Remember:

Although you can learn a lot from seeing other peoples' pages on the web, NEVER use someone else's source or images without their permission.  Aside from the fact that it's illegal, and isn't a very nice thing to do, changing the HTML doesn't make it your property, and chances are the creator will recognize it anyway.  A simple e-mail message complimenting the author, and requesting permission to use their methods will do wonders.  They may even be flattered enough to help implement the item in  your page.

TUTORIAL


Summary of Tool Bar Buttons

Preview current document

 	New Document

Open Document

Save to Disk

Cut selected text to clipboard

Copy selected text to clipboard

Paste text from clipboard

Delete selected text

Insert Line Break

Mark Paragraph

Set text attributes

Insert Horizontal Rule (line)

Insert image

Create Link

Set internal anchor

Bold or STRONG

Italicize or EMP

CENTER or

P ALIGN=CENTER or

ALIGN=CENTER

Set ALIGN=RIGHT property

Set ALIGN=LEFT property

Table Dialog Box.

Form Dialog Box

List Dialog Box

Insert text as Comment

Zap all HTML tags from selected area.

Create Header

Print current document

Set document color attributes


About GOMER

GOMER provides the features needed by professional web designers and a simple text interface for total control over web documents.

This program is the result of nearly a year of programming and web design.  While working as a designer, I was constantly reworking and revising Gomer to handle the problems encountered in my projects.  I think this application has become a very effective tool for quickly and easily creating high quality web documents, and I hope you'll find it useful as well.

Limitations

    There are not buttons for everything in Gomer.  There never will be.   The intention of this editor is to simplify entering repetitive or complex tags, not shield the user from HTML scripting.  Although GOMER will cut the time required to create a html document significantly, and aid new users in getting started with HTML, it is not meant to take the place of learning the context.


Why should you register?

-  Why not?

Where else can you get...

- Context-sensitive help

- Easy-to-use scripting tools

- The total control of an all text interface

at such a great price?

If you use the program, and have a few bucks, please register it.


Basic HTML tags

Here are a few of the basics to get you started.

Text

<BR>	Line Break

<P>	Paragraph

<B></B>	Bold

<I></I>	Italics

<BLINK></BLINK>	Blink

Graphics

<IMG	Start of image information

SRC="file"	Specifies image file

ALT="text"	Text to display if image cannot load

BORDER=x	x = border size

ISMAP	Sets image as an ISMAP image

LOWSRC=""	Specifies low-res file if desired

ALIGN=	sets alignment.  Use: TOP, BOTTOM, MIDDLE, LEFT, RIGHT, TEXTTOP, ABS BOTTOM,  ABSMIDDLE, BASELINE

Document

<HTML></HTML>	Identifies HTML document

<HEAD></HEAD>	Identifies header information

<TITLE></TITLE>	Document title.

<BODY></BODY>	Document body

   BACKGROUND=	Document background image file.

   BGCOLOR=	Document background color.

   TEXT=	Document text color.

   LINK=	Document link color.

   ALINK=	Active link color.

   VLINK=	Visited link color.

A more detailed list of tags is available by pressing F5 while running Gomer.


Hyper-link
Hyper-link   <A HREF= X ></A>

where X is any valid URL

Use this tag to create links within the current document, or to another file.

Example:

Please <A HREF="Myfile.html">click here</A>

Would appear as:

Please click here

Elements:

<A HREF=

Internal

"#***"	Name of link within document ( see: A NAME)

External

"http://***"	link to html document

"mailto:***"	Send E-mail to ***

"ftp://***"	link to FTP

"newsrc://***"	link to USENET news

"***"	Any valid URL

Used with Frames

TARGET=""

   "*****"	Name of frame.

   "_TOP"

   "_SELF"

   "_PARENT"

   "_BLANK"


hyperlink
clicking on the image or text between

these tags will bring you to the link.

(in this example "Myfile.html")


Various Elements
Document Elements   <!... >

There are a variety of document elements which fall into this category.

the Document Type Definition is an example.


Internal Anchor
Internal Anchor   <A NAME="x"></A>

Example:

<A NAME="TOP"></A>

The <A Name=> tag will provide a destination for jumps within a document, or to jump to a specific location from another document.  It is used in conjunction with the <A HREF> element.


Address
Address  <Address></Address>

Use this tag for displaying addresses

Example:

<Address>Bob Johnson<BR>

123 Johnson St.<BR>

Johnsonville, FL 12345<BR></Address>

Would appear as:

   Bob Johnson

   123 Johnson St.

   Johnsonville, FL 12345


Align property
Align= property   ALIGN=x

x can be any valid alignment for the element

Example:

<HR ALIGN=LEFT>

The Align property sets the alignment of an element in the HTML document.

The property must be part of another tag.  Placing "align=right" alone in the document would just cause those words to appear.

elements: (depending upon item)

LEFT | CENTER | RIGHT | TOP | MIDDLE | BOTTOM | ABSBOTTOM | ABSMIDDLE | BASELINE

See Also:

<HR>

<Hx>

<IMG>

<INPUT>

<P>

<TABLE>

<TD>

<TH>


Base
Base ..   <BASE ...>

Sets property of referenced item.

Example:

<BASE HREF="http://www.hello.com>

See Also:

<FONT>

<A HREF>

Target


Big text
Big text   <BIG></BIG>

Formats text in a larger size.

Example:

This is <BIG>Big</BIG> text.

Would appear as:

This is Big text.

See also:	<SMALL>

<FONT>


Block Quote
Block Quote <BLOCKQUOTE></BLOCKQUOTE>

Used to clearly identify a block of text.

Example:

<BLOCKQUOTE>HELLO</BLOCKQUOTE>

Would appear as:

    HELLO


BODY tag
Body <BODY></BODY>

Starts and ends the body of your HTML document. Nearly all of the information for a HTML document goes between the BODY tags.  Document color specifications go in the first <BODY> tag.

Example:

<Body BGCOLOR="#FFFFFF" TEXT="#0000FF">

Would appear as:

A document with a white background and blue text

BACKGROUND=""	Background image file

BGCOLOR=""	Background color in hex

TEXT=""	Text color in hex

LINK=""	Link color in hex

ALINK=""	Active link color in hex

VLINK=""	Visited link color in hex

BGSOUND=""	Background sound file

  LOOP=""	Number of times to play sound

BGPROPERTIES=FIXED	Non-scrolling background

LEFTMARGIN=""	Left Margin (no really!)

TOPMARGIN=""	Top Margin Size

See also:  Document Structure


Bold
  Bold   <B></B>

Example:

This <B>sample</B> text.

Would appear as:

This sample text.

Use this tag to create bold text.

Shortcut key: CTRL + B

See Also:  <STRONG>


Blink
Blink  <BLINK></BLINK>

Example:

This <BLINK>sample</BLINK> text.

Would appear as:

In this example, the word "sample" would blink on and off when viewed.

Use this tag to create blinking text on browsers which support the feature.  Be careful when using this tag, it is generally regarded as annoying, and overuse will give users a negative impression of your page.


Center
  Center    <Center></Center>

Use this tag to center text or images on the page.

Example:

<Center>This sample text.</Center>

Would appear as:

                This sample text.

If text is selected when the  [image] is pressed <CENTER> is used, otherwise ALIGN=CENTER will be assumed.

See also:  <P ALIGN=CENTER>


Comment
Comment   <!--      -->

Example:

<!-- This sample text. -->

Would appear as:

Any text enclosed in this tag will not be shown

when the document is viewed.

Use this tag to create comments.

note:

Some browsers incorrectly show tags which are enclosed in the comment.  Although it is legal to enclose other tags in the <!-- --> you should remember that some viewers may actually see  them when browsing the page.


Citation
Citation  <CITE></CITE>

Use this tag to identify citations.

Example:

<CITE>this is a citation</CITE>

Would appear as:

this is a citation


Code
Code  <CODE></CODE>

Use this tag to differentiate Code text.

Example:

<CODE>this is code</CODE>

Would appear as:

this is code


Definition
Definiton  <DFN></DFN>

Another tag used to differentiate text. Usually smalller, or in Italics.

Example:

<DFN>this is a definition</DFN>

Would appear as:

this is a definition


Definition list
Definition List   <DL></DL>

This list allows for the creation of definitions in a document.

Example:

<DL>

<DT>Term<DD>Definition of the term.

</DL>

Would appear as:

Term

Definition of the term.

<DL></DL>	Start/End of list

<DT>	Term

<DD>	Definition


Directory List
Directory List <DIR></DIR>

Defines a menu

Example:

<DIR>

<LI>DIR ITEM

<LI>DIR ITEM

</DIR>

Would appear as:

 DIR ITEM

 DIR ITEM

See Also:

Unordered List

Menu List


<DIV>
Division   <DIV></DIV>

Marks sections of a document.

Example:

<DIV ALIGN=CENTER>sample</DIV>text.

Would appear as:

                           sample

 text.

<DIV

   ALIGN= 	LEFT | RIGHT | CENTER

See also:  <P>


<EM>
  Emphasis   <EM></EM>

Use this tag to create italicized (usually) text.

Example:

This <EM>sample</EM> text.

Would appear as:

This sample text.

See also:  <I>


Font properties
 Font   <FONT></FONT>

This tag controls the appearance of text in an HTML document.

Example:

This <FONT SIZE=+2 COLOR=#FF0000>sample</FONT>text.

Would appear as:

This sample text.

('Sample' should be red, and larger)

<FONT>

elements:

SIZE="X"	+X | -X | X  where X is any valid number.

COLOR=" "	Hex # or Color name

FACE="x,x"	Name of font(s) to use


FRAMES
Creating Frames

Frames are used to present multiple HTML documents in the same browser window.  At this time they are not part of any official HTML specification, and are not supported by most browsers.

Example:

<FRAMESET COLS="45%,*">

 <FRAMESET ROWS="50%,*">

    <FRAME SRC="title.html" SCROLLING="NO">

    <FRAME SRC="Link.html" >

 </FRAMESET>

 <FRAMESET ROWS="20%,*">

    <FRAME SRC="intro.html" Name="Mainframe">

    <FRAME SRC="resume.html" NORESIZE>

 </FRAMESET>

</FRAMESET>

<NOFRAMES>

 <!-- regular doc goes here -->

</NOFRAMES>

Would generate the following frameset:

(note: this drawing shows only approximate values)

<FRAMESET>	Configures frameset

Elements:

COLS=" "	Columns - can be pixels, %, or * (remaining)

ROWS=" "	Rows - can be pixels, %, or * (remaining)

<FRAME >	Configures individual frame

Elements:

SRC=" "	URL of HTML document to display in frame.

NAME=" "	Name of frame for targeting.

SCROLLING=	"NO" | "YES" | "AUTO"

NORESIZE	Do not allow user to resize frame.

<NOFRAMES>	Start of information to display if viewer doesn't support frames.

</NOFRAMES>	End of information to display if viewer doesn't support frames.


Head tag
Head Tag <HEAD></HEAD>

Example:

<HEAD>

<TITLE>Hi</TITLE>

</HEAD>

Contains <TITLE> tag and other document info.

The <HEAD> tag should follow the first <HTML> tag.

See also:  Document Structure


Header
Header   <Hx></Hx>

(x is any number from 1 to 6; 1 being the largest size text.)

Use this tag to create a header.  Headers are used as titles at the top of a document, or within individual sections.

Example:

<H2>Sample text</H2>

Would appear as:

Sample text

<H1><H2><H3><H4><H5><H6>

Note:

    Sizes are for comparison only - Actual sizes vary greatly by browser.

Shortcut key: SHIFT + F1 - F6


Hex Colors
Hex Colors   "#FFFFFF"

Any color which can be displayed on a computer monitor (16.7 million of them) is made up of a composite of three base colors: Red, Green, and Blue (RGB).  Each base color will have a value of 0 through 255.  When these values are converted to hexadecimal 00-FF and placed in order, the six digit hex color code is created.

#000000 -Black (no red, green or blue)

#FFFFFF -White (100% of all colors)

#FF0000 -Red (100% red, 0% of green and blue... etc.

NOTE: The editor will take care of all of this for you, so you won't ever need to worry about it.

There are at least 2 web browsers that will now recognize literal color names, such as "BLUE" or 'RED".  Of course, it's important to note that hex values are compatible with the largest number of browsers, and are more configurable.


Horizontal Rule
Horizontal Rule   <HR>

Use this tag to create a dividing line between sections of information.

Example:

<HR WIDTH=70% NOSHADE>

Would appear as:

 _______________

(A solid line 70% of the page width)

<HR

 NOSHADE	No 3D effect on rule.

 WIDTH=x	Sets width in pixels or percent of page.

 SIZE=x	Sets thickness of rule.

 ALIGN=	Sets alignment to LEFT, CENTER, or RIGHT.


HTML tag
HTML Tag <HTML></HTML>

<HTML></HTML>

Identifies HTML document.

Contains <HEAD>, <TITLE> and <BODY> tags.

This tag should appear at the top and bottom of each document

See also:  Document Structure


Image
Image <IMG>

Use the IMG tag to put pictures in your HTML document.

Example:

<IMG SRC="Myfile.gif" ALIGN=RIGHT>

Would display "Myfile.gif"  in the current document.

Elements:

<IMG	Start of image information

SRC="URL"	Specifies image file

ALT="text"	Text to display if image cannot load

BORDER=x	x = border width

LOWSRC=""	Specifies low-res file if desired

ALIGN=	Alignment. use: TOP, BOTTOM, MIDDLE, LEFT, RIGHT, TEXTTOP, ABS BOTTOM,  ABSMIDDLE, BASELINE

HEIGHT=	Specify height to speed loading

WIDTH=	Specify width to speed loading

ISMAP	Image map.

USEMAP=""	Client side image map

DYNSRC=""	VRML or AVI file to display

START=""	Fileopen or mouseover

LOOP=x	Repeat AVI x times

CONTROLS	Display controls for movie


ISINDEX
ISINDEX <ISINDEX>

Identifies document as a searchable index

Example:

<ISINDEX PROMPT="Enter search text">

<ISINDEX>	Create area for user input.

PROMPT=""	Specifies Prompt (Browser Specific)


Italics
  Italics   <I></I>

Use this tag to create italicized text.

Example:

This <I>sample</I> text.

Would appear as:

This sample text.

Shortcut key: CTRL + I

See also:  <EM>


Keyboard
Keyboard   <KBD></KBD>

Use this tag to demonstrate text a user should type.

Example:

Next, type <KBD>HELLO</KBD>

Would appear as:

Next, Type HELLO


<BR> - Line Break
  Line Break   <BR>

Use this tag to end the current line and start a new one.

Example:

This sample<BR>text.

Would appear as:

This sample

text.

<BR>

  CLEAR=""	LEFT | RIGHT | ALL | "x"  - moves to clear area.

Shortcut key: SHIFT + ENTER


<LINK>
 Link   <LINK...>

Defines Relationships / Links related to a document.


MARQUEE tag
Marquee <MARQUEE>

Defines moving text.


MENU tag
Menu <MENU></MENU>

Defines a menu

Example:

<MENU>

<LI>MENU ITEM

<LI>MENU ITEM

</MENU>

Would appear as:

 MENU ITEM

 MENU ITEM

See Also:

Unordered List

Directory List


META Information
Meta information   <META...>

Defines Meta information in a document.

Example:

<META HTTP-EQUIV=Refresh CONTENT="5; URL=file2.html">

<HTML>

Would appear as:

The  browser would automatically load "file2.html' after the specified interval without requiring any special output from the server.


NOBR
No Break <NOBR></NOBR>

Stop text from line wrapping.


Pre-formatted text
Pre-formatted Text   <PRE></PRE>

Text within this tag will be rendered in a monospace font, and will appear in the same format as when entered.

Example:

<PRE>This sample text.</PRE>

Would appear as:

This sample text.


Paragraph
  Paragraph  <P>

Use this tag to create blank space between, or paragraphs.

Example:

This <P>sample text.

Would appear as:

This

sample text.

Note: </P> closing tag is optional

</P>	Closes <P> tag (Optional for most browsers)

ALIGN=""	Specifies Paragraph alignment

If text is selected when [image] button is pressed, a closing </P> tag will automatically be appended to the end of the selection.

Pressing  SHIFT + [image] will add the Align=center attribute to the <P> tag, causing it to function much the same as the <CENTER> tag.

 This button enters the <P ALIGN=CENTER> tag when strict tags are selected in the preferences box.

Shortcut keys:

CTRL + P 	To add the <P> tag.  If text is selected, a closing </P> will automatically be added.

CTRL + INS 	Use this combination if you need to add a <P> tag with a closing </P> when no text is selected.


Lists

Unordered (bulleted) list

Ordered (numbered) list

Definition list

List Item

See Also:

   List Dialog Box


    List Dialog Box

This form helps speed creation of lists.

Unordered List

- Enter each list item on a separate line.

- Select Bullet Style if required.

Ordered List

- Enter each item on  a separate line

- Select numbering style if required.

- Select starting number if needed.

Definition List

- Place DT tag before each new term.

- Place DD tag between term and definition.

Text can be entered by typing into main document, and then highlighting before opening list form.


List Item
List Item   <LI>

This tag designates an item in an unordered, ordered, menu, or directorylist.

Example:

<UL>

 <LI> List Item

 <LI> List Item

 <LI> List Item

</UL>


Unordered list
Unordered Lists   <UL></UL>

This type of list is represented by bulleted items.

Example:

<UL Type=circle>

<LI>This is a list

<LI>The Unordered type

<LI>Sample Sample

</UL>

Would appear as:

 This is a list

 The Unordered type

 Sample Sample

<UL></UL>	Start /End of list

Type=circle	round bullets (default)

Type=square	square bullets

Type=disc	same as circle

<LI>	List Item


URL

Basically, the tern URL refers to the address of a file on the internet.  It allows a user to access a specific file among the billions which are currently available on the web.

Example:

http://www.anysite.com/


Ordered list
Ordered List   <OL></OL>

This type of list is represented by numbered items.

Example:

<OL START=1 TYPE=1>

<LI>This is a list

<LI>The Ordered type

<LI>Sample Sample

</OL>

Would appear as:

 1. This is a list

 2. The Ordered type

 3. Sample Sample

<OL></OL>	Start /End of list

Start=x	Start list at x

Type=1	1, 2, 3 (Default)

Type=a	a, b, c

Type=A	A, B, C

Type=i	i, ii, iii

Type=I	I, II, III

<LI>	List Item


Sample tag
Sample <SAMP></SAMP>

Sample text.  Usually fixed width

See Also:

CODE


Strike Through
Strikethrough <S></S>

Use this tag to Strikethrough text.

Example:

<S>HELLO</S>

Would appear as:

HELLO


Special Characters
Special Characters  &xxx;

Example:

This file &#169; Copyright 1996, Brad Klann

Would appear as:

This file © Copyright 1996, Brad Klann

To use a character which cannot be directly typed into a HTML document, use the ampersand (&) along with the character code or a # sign with that character's ANSI code.

<	&lt;

>	&gt;

"	&quot;

©	&copy;  or  &#169;

®	&reg;

TM	&trade;

&	&amp;

note: These tags are not all supported in every browser.  The editor has a larger list of special character codes.


STRONG
  Strong <STRONG></STRONG>

Use this tag to create bold text.

Example:

This <STRONG>sample</STRONG> text.

Would appear as:

This sample text.

Shortcut keys:

          CTRL + B

(With strict tags selected in preferences box)

See Also:  <B>


Title tag
Title   <TITLE></TITLE>

Example:

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

The title tag appears between the <HEAD> tags.  Depending on the browser, the title will usually appear at the top of the browser window.

See also:  Document Structure


HTML Documents
HTML Document Structure

<HTML>

<HEAD>

<TITLE>My Home Page</TITLE>

</HEAD>

<BODY>

<!--  Document information goes here  -->

</BODY>

</HTML>

This is an example of a very basic HTML document.

Use this format when producing HTML documents for the Web.

(The editor will automatically do this for you.)

See also:

<HTML>

<HEAD>

<TITLE>

<BODY>


Creating Forms
Forms - Introduction

Forms provide an interface to an information gathering program on your server.  Although you will most likely be exposed to a number of them, only advanced web designers will ever have to create forms, since a CGI program needs to written, and many ISP's won't even allow this type of program to be run by private subscribers.

All form elements must be enclosed between these tags:

<FORM> </FORM>

elements:

ACTION=	URL data will be referenced to

METHOD=	Usually GET or POST

ENCTYPE=	Data format

See Also:

<INPUT>

<TEXTAREA>

<SELECT>

<OPTION>


<INPUT TYPE=>
Form Input  <INPUT TYPE=...>

See also

TYPE=TEXT

Text box. Used for single line text input.  The default input type for forms.

elements:

NAME=	Name used for referencing input

SIZE=	Size of text box

VALUE=	Default value

TYPE=RADIO

Allows user to check options.

elements:

NAME=	Name used for referencing input

VALUE=	Default value

CHECKED	Button will appear  as checked

TYPE=CHECKBOX

Allows user to check options.

elements:

NAME=	Name used for referencing input

VALUE=	Default value

CHECKED	Box will appear  as checked

TYPE=RESET

Resets all form elements to their default values.

elements:

VALUE=	Default value (displayed as caption)

TYPE=SUBMIT

Submits form data to specified URL

elements:

NAME=	Name (optional)

VALUE=	Default value (displayed as caption)

TYPE=IMAGE

Works a lot like an image map, but in conjunction with the form.  The coordinates submitted by the user will be transmitted with the other information.

elements:

NAME=	Name used for referencing input

SRC=	URL of image file

ALIGN=	Alignment of image file; see <IMG>

TYPE=HIDDEN

Hidden Text box.

This input type is used for submitting information with a form.  This field is not visible to, and cannot be changed by the viewer.

elements:

NAME=	Name used for referencing input

SIZE=	Size of text box

VALUE=	Default value


<TEXTAREA>
TEXTAREA   <TEXTAREA></TEXTAREA>

Used for multiline user text input.

elements:

<TEXTAREA

NAME=	Name used for referencing input

ROWS=	Number of textarea rows

COLS=	Number of textarea columns

Example:

<TEXTAREA NAME="textarea" ROWS=2 COLS=35>

Text Area

</TEXTAREA>

would look something like this:

See also:

<FORM>

<INPUT>

<OPTION>

<SELECT>


<SELECT>
SELECT   <SELECT></SELECT>

Allows user to make selection from several choices

Example:

<SELECT NAME="textarea" >

 <OPTION SELECTED>Dropdown Combo box

 <OPTION>Option 2

 <OPTION>Option 3

 <OPTION>Option 4

</SELECT>

would look something like this:

elements:

NAME=	Name used for referencing input

SIZE=	Size of Element

MULTIPLE	Allows more than one selection

See also:

<FORM>

<INPUT>

<TEXTAREA>

<OPTION>


<OPTION>
OPTION  <OPTION>...

Defines choices for the SELECT form element.

elements:

VALUE=	Name used for referencing input

SELECTED=	Displayed as selected initially

example:

<SELECT NAME="textarea" >

 <OPTION SELECTED>Dropdown Combo box

 <OPTION>Option 2

 <OPTION>Option 3

 <OPTION>Option 4

</SELECT>

would look something like this:

The user could choose from any of the other options as well.

See also

<FORM>

<INPUT>

<TEXTAREA>

<SELECT>


See Also - Form
<FORM>

<INPUT>

<TEXTAREA>

<SELECT>

<OPTION>


Small text
Small text   <SMALL></SMALL>

Formats text in a smaller size.

Example:

This is <SMALL>Small</SMALL> text.

Would appear as:

This is Small text.

See also:

<BIG>

<FONT>


Subscript text
Subscript   <SUB></SUB>

Formats text as subscript.

See also:  <SUP>


Superscript text
Superscript   <SUP></SUP>

Formats text as superscript.

See also:   <SUB>


Table
Table   <TABLE></TABLE>

A Table allows web page designers to organize data.

<TABLE></TABLE>

All table information is put between these tags.

Elements:

Border=	Table border size

Cellpadding=	Space between data and cell wall

Cellspacing=	Space between cells

Width=	Width of table in  pixels or %

Related Elements:

<CAPTION></CAPTION>	Table Caption

<TR></TR>	Table Row

<TH></TH>	Table Header

<TD></TD>	Table Cell Data


 Table Dialog Box

This form simplifies the creation of tables by laying out a basic template.

After selecting table attributes, configure data elements in main editor.

Size Reference

This table shows the currently selected number of rows and columns

New Line for each cell

Checking this box leaves each <TD> element on a separate line.

Caption

Entering a caption for your table is optional.

See Also:

       Tables


Typewriter
Typewriter  <TT></TT>

Use this tag to display text as a monospaced font.

Example:

<TT>this is typewriter</TT>

Would appear as:

this is typewriter


Underline
Underline  <U></U>

Use this tag to display underlined text.  Because links are rendered as underlined text in many browsers, this tag can confuse some viewers.

Example:

This is <U>underlined</U> text

Would appear as:

this is underlined text.

Shortcut key: CTRL + U


Variable
Variable  <VAR></VAR>

Use this tag to display variables.

Example:

Accessed<VAR>accesscount</VAR> times

Would appear as:

Accessed accesscount times


Word Break
Word Break  <WBR>

Use this to indicate possible word breaks.

Example:

Controlling Word break<WBR>age.

Could appear as:

Controlling Word breakage.

or as:

Controlling Word break-

age.

Because it is impossible to tell what size a line of text will be rendered at with every user's web browser, this tag allows for large words to be broken at specified positions rather than moving the whole word to the next line.


Remove tags from document
  Remove all HTML Tags

This function will remove all markup tags from an HTML document.

This is handy if you need to convert a document to plain text, or if you want to redo a section of code.


Automatically enter <BR> tags
Auto-break function

This function will automatically enter the <BR> tag at the end of every line within the currently selected text.

This is handy if you need to convert a plain text document to HTML.

Note: SHIFT + ENTER produces a single <BR> tag.

See Also: <BR>


Automatically enter <P> tags
Auto-Paragraph function

This function will automatically enter the <P> tag on every blank line of the currently selected text.

This is handy if you need to convert a plain text document to HTML.

Note:  CTRL + P produces a single <P> tag.

See Also: <P>


New Document Window

This window allows you to control the Document structure tags.

Document Title

Depending on the viewer's browser, this text will appear in the title bar.

Comments

Comments can't be seen when the document is viewed in a browser window.  They are used mainly for information about the document, author, copyright, and creation and revision dates.

Buttons

   Date

   Time

   Copyright & Year

   Author's Name

Radio Buttons

The radio buttons on this form allow for the choice of DTD, No DTD, or No HTML Tags at all.

DTD is the information element containing document type definition information.  This can be included in HTML documents, but it is not required.

No DTD is the default document format.

No Tags, use this option for creating non-HTML text files.  If you need to write small scripts, or edit map files, you would not want to start with HTML tags.


Document Color Selection

This dialog box allows you to control the colors of the background, text, and links in the current HTML Document.

Background

Check the color box to select a background color for your document.

Check the image box to select a background image.

Text, Link, Active link, Visited link

Check box to change the color of the selected item.

Color="#000000"

This box shows the hex color code for the color displayed in the sample box.

Scroll Bars

Use the scroll bars to adjust the color of the selected item.

Custom Color Palette

This button brings up the windows color palette.

note:

-  All values are automatically reset when this form is loaded.

-  To change the color of an item, the appropriate panel must be pressed in .

-  Any unchecked items are left at the default value.


Text Attributes

This form provides a quick reference to the most common HTML text attributes.

The upper panel shows a portion of the selected text for color reference.

See Also:

Size

Text Color

Bold

Strong

Italic

Emphasis

Big

Small

Superscript

Subscript

Underline

Strikethrough


Preview Options

When working with HTML documents, you are going to want to see what your page will look like.  The only method of doing this (with any reliability) is to view it through the WWW browser, or several browsers for even more accuracy.  This is the only way to see your page exactly as it will look when it is on the web.  GOMER offers several methods of previewing your page.

Save Document, reload manually in browser(s)

I prefer this method for previewing HTML documents.  Selecting this preview option is the same as pressing the save button on the toolbar.  Each time you preview, you are saving the document.

To implement this method:

- After saving the file, start your WWW browser (or browsers) and load the file from the hard drive.

- To view revisions, press preview or save button to save the current file, next, press the reload button on your web browser. You can view the document on every loaded browser without resaving it. (saves some time)

Save current Document as temporary file, reload manually in browser(s)

This method is the same as above, except the file will be saved under a different filename in case you don't want the changes  to be permanent.

Choose HTML Browser

With this method, Gomer will save the current document and load it into the selected browser.  It is possible to specify up to 3 browsers to select from for previewing.

Gomer supports Dynamic Data Exchange with the Netscapetm web browser.  This browser can be started through GOMER, and once running, pages can be passed to it easily.

Web Browsing programs which support command-line parameters can also be started through Gomer to preview pages, however, they must be closed when finished previewing to prevent multiple instances or possible errors.

Save file Preferences

You can choose between saving the current file before preview, or saving as a separate temporary file.

Save Current File

With this option selected, GOMER saves the changes to the current document, and launches the preview method selected above.

Use Temporary File

With this option selected, the current file will be saved as a file named ~temp.htm.  If you select this option any changes to the current document will not be saved so you can revert to the last saved version if you don't like the newest changes.  The ~temp.htm file will remain on your hard drive, but it will be overwritten with future previews.


Templates - dialog box
Template Dialog

See Also:  Using Templates With GOMER

Adding Templates to your list

To add template files to this list, you first need to create them.

- Create a normal document with all of the information you want on the template

- Save the file with the *.GTM extension

- You now have a Template

After you have created a suitable *.gtm file:

- Bring up the dialog again.

- Press the ADD button.

- Enter both a description, and the path to the template file.

Using Templates from the list

To use a template file from the list, just double-click on it's description.


Using Template Files with GOMER
Using Templates with GOMER

Templates can be used like a pattern for creating many web documents with much of the same information without entering it into each separately.

A Gomer template file is nothing more than a HTML file which has been saved with a file name extension identifying it as a template.

When a template file is opened, GOMER will not recognize it as a file, but will treat it as a new document.  This helps to prevent accidental overwriting of the file.

Creating Templates

1. Create a document containing the information you want to be common to all documents which use it.

2. Save the document as a template by using the .gtm file name extension. ( make sure to specify the extension, or it will default to .htm )

Using Templates

Gomer uses Template files in three ways:

1. They can be opened just like a regular file

2. They can be opened from the Template Dialog

3. A template file can be set as the default new document in the preferences dialog


Troubleshooting

Document text does not appear when loaded.

If no text appears in the document window, check the   window   window font...   menu.  The font may be set to a value which isn't supported by your system.

GOMER 'Hangs' when starting.

Check to see if enough memory is available.  Close other applications and try starting Gomer again.  If gomer will not load properly because of a corrupt initiation file, delete the GOMER.INI file to prevent reading of the incorrect data.  You will lose any custom information, but the program should load properly.

Installation error: File not Found.

If you have any problems with the Setup program, you do not need to run it -- it's only function is to copy the .dll and .vbx files into your windows\system directory, the program files into whichever directory you specify, and create the program icons and group.  This can all be done manually, and GOMER will run fine without ever using the setup program.

Cannot find VBRUN300.DLL

GOMER needs the vbrun300.dll run-time library file.  This file is required for any VB application to run, so it is present on most machines. If you don't already have this file, it can be found nearly anywhere shareware files are distributed, or at the Gomer web site.  (http://www.clever.net/gomer/)


Acknowledgments

This program is dedicated to GOMER.

Over 180 people from countries around the world participated in beta-testing GOMER.  Many of the features, and much of the documentation of this program have been added, enhanced, or improved because of requests and bug reports from them.

The efforts of all contributors to this program are greatly appreciated.  However, a couple of people came up with several especially helpful suggestions resulting in significant improvements in the program in multiple areas.  These people deserve special recognition.

David Rawsthorne, Stewart Dean , Matthew Thompson

Trademarks and Copyright

Netscape is a trademark of Netscape Communications Corporation.  Windows and Windows 95 are trademarks of Microsoft Corporation.  All other trademarks are property of their manufacturers.

GOMER, all included documentation and graphics are:

(C) Copyright 1996  Stoopid Software

 All Rights Reserved


General Information

This screen contains general information for use by the program.

E-Mail address

This e-mail address is used by the link dialog box for quick insertion into hyper-links.

Template information

If you prefer to start a document from a standard format instead of  the default dialog boxes, you can specify that in this area.

See Also:

Using Templates


Revert to last saved version

This option under the File menu allows you to return the document you are working on to exactly how it was the last time it was saved.  This works well after making large changes which you aren't too fond of.

Note:

Previewing a document will save it.  If you aren't sure if you will want to keep the changes to the document, choose to preview the document with a temporary file.


List of short-cut keys
Shortcut Keys

Shortcut keys eliminate the need to use a tool button or pull-down menu.  I strongly recommend learning these keys.

F1	Help

CTRL+SHIFT+F1 	Preview

SHIFT + ENTER	Line break

CTRL + P	Paragraph

CTRL + INS	Paragraph (closed)

CTRL + Z	Undo

CTRL + X	Cut

CTRL + C	Copy

CTRL + V	Paste

DEL	Delete

CTRL + B	Bold

CTRL + I	Italics

CTRL + U	Underline

CTRL + A	Text attributes

CTRL + M	Insert Image

CTRL + K	Create HyperText link

CTRL + L	Create list

CTRL + H	Horizontal rule

CTRL + T	Create table

CTRL + D	Document colors

CTRL + F	Create frameset

Shift + F1	Header size 1

Shift + F2	Header size 2

Shift + F3	Header size 3

Shift + F4	Header size 4

Shift + F5	Header size 5

Shift + F6	Header size 6

CTRL + G	Find / Change

F3	Find next

F4	Replace

F5	Tag quick-reference

F6	Special characters

CTRL + F12	Last modified

F7	Upper case

F8	Lower case

F9	Preferences box

F11	Check tag matches

F12	Custom tag

CTRL + N	New File

CTRL + O	Open File

CTRL + S	Save File

CTRL + Q	Close all open windows

CTRL + W	Cascade windows

CTRL + E	Tile windows


Browse through HTML Files
Browse Files

Use this feature to preview HTML or other plain text files before you open them.

You cannot change any of the text in the preview window, however you may copy it to the clipboard, and paste it into an open document.

Double click on the file name, or click on the Open button to open.

The Delete button will permanently remove the selected file from your hard drive.


List of known bugs.
Known Bugs List

I haven't seen a program yet that didn't have any bugs, and GOMER is no exception.  Here is a list of bugs which I am currently aware of, but haven't been able to squish yet.

Opening an Invalid File

Attempting to open a funky file, (image, executable, etc.) can create an illegal function call error.  So far, this has only occurred with files which should not be opened with the editor anyway   (Most people know better than to try to edit an image with a text editor) and GOMER handles it fairly well when this is tried-- but  this error has yet to be completely trapped.

That's it for now...


Find / Change

Search for and/or replace strings of text in an open document.

Enter String to search for:

Text to find when Find First or Find Next(F3) is pressed.

Change to:

Text which will be used to change when Change All or Change(F4) is pressed.

Match Case / Any Match

With Any Match selected, a word with letters of a different case, such as the capital T in "The" will match "the"; with Match Case selected, it will not.

Up / Down

Specifies search direction.

Words / Substrings

This option controls whether the search string can be found as any string, or only as an entire word.

Whole Page / From Cursor

Controls where to begin search from.  Whole Page will start at top of page when direction is set to Down, bottom when direction is set to Up.

Find First

Finds the first instance of the string specified in the "Enter string to search for:" box.  Additional instances can be found by pressing the F3 key, or changed with the F4 key.

Change All

Changes every instance of the string specified in the search box to the string specified in the "Change to:" box.


Tools and Features of the Editor
Gomer - Tools / Features

Add <BR>

Add <P>

Add Date

Add Time

Browse Files

Check Tag Pairs

Custom Tag

Click and Drag Text Editing

Insert File

Last Modified

Lower Case

Quick Cut and Paste

Remove Frames

Remove All Tags

Revert to last saved

Tooltips

Upper Case

Word Wrap


Add Current time or Date to document
Add Time / Date

To add the time or date to the current document, click on the time or date box in the information bar (at the bottom of the editor screen.)


Check Tag Pairs

A common error in writing HTML is missing opening or closing tags.  The tool checks about 40 of the most common tags to ensure they aren't missing closing elements.

The tool also checks the HTML, HEAD, TITLE, and BODY tags to see that there is only one pair of each in a document.

Quotation marks are counted, and a message box appears if an odd number is encountered. (note: this tool may miss some incorrect quotations-- an even number of unmatched quotes pairs will not be found)


Click and Drag Text Editing

This feature makes moving blocks of text quicker and easier than using cut and paste.

To move text within a document;

- Highlight the text

- Press and hold the left mouse button

- Drag to the proper position in the document

- Release the button

The highlighted text will be moved to the proper position.


Quick Cut and Paste

Gomer now supports quick editing of text with the right mouse button.  Text can be cut from, and pasted into, the active document with the mouse.

When the right mouse button is pressed, a pop-up menu will appear.

Choose to Cut, Copy or paste text from the pop-up menu.

Please Note:

Mouse cursor must be over the text window of the current document.

Text will be pasted at the position of the  text cursor - Not the mouse cursor.  To move the text cursor to the position of the mouse cursor press the left mouse button before pasting text.


Changing text case
Change Text Case

Upper Case / Lower Case

These tools change all of the selected text to upper or lower case.

Simple, but suprisingly handy.

Shortcuts:

F7	Upper Case

F8	Lower Case


Inserting a file into the active document
Insert File into Document

With this, you can insert an existing text file into the current document.


Last Modified Information
Last Modified

Many Web authors like to display information about when a document was last revised.  This feature easily adds this information.

Shortcut Key:

CTRL + F12


Removing Frames from a document
Remove Frames

If you want to redo, or eliminate the frames from a document, this'll do it for you quickly.


Word Wrap

Whether you prefer to view the lines of text in your document at actual length, or wrapped to fit the window, Gomer can handle it.

Word Wrap - Checked

All lines longer than the current window size will be wrapped to fit.

Word Wrap - Unchecked

All lines of the HTML document will remain as typed.  Scroll to see any text not visible in window.


Using the Custom Tag tool
Custom Tag

If you need to enter any text string many times into a document, and would be helped by a shortcut key, use the custom tag tool.

Shortcut keys:

F12 	to use tool

Shift + tool button 	to change text


Using Tooltips
Tooltips

These little yellow information boxes will pop up when the mouse pointer is over a toolbar button.  They provide information about the purpose of the button.

To turn on (or off) tooltips, choose Tooltips from under the Help menu.